<template>
  <div id="productListHeader">
    <div class="fl">
      <div class="title">Sort By</div>
      <el-select class="sortBy"
                 v-model="sortBy"
                 @change="sortByChange">
        <el-option :value="1"
                   label="From high to low  ( price )"></el-option>
        <el-option :value="0"
                   label="From low to high  ( price )"></el-option>
        <el-option :value="3"
                   label="From high to low  ( count )"></el-option>
        <el-option :value="2"
                   label="From low to high  ( count )"></el-option>
        <el-option :value="5"
                   label="From high to low  ( conditions )"></el-option>
        <el-option :value="4"
                   label="From low to high  ( conditions )"></el-option>
        <el-option :value="6"
                   label="From new to old"></el-option>
        <el-option :value="7"
                   label="From old to new"></el-option>
      </el-select>
    </div>
    <div class="fr">
      <div class="title"></div>
      <el-input placeholder="Key Words"
                @input="keyWordsChange">
        <i slot="prefix"
           class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="img-wrapper">
        <img src="../../../assets/icons/select-one.png"
             v-if="showStyle ==='row'"
             alt="">
        <img src="../../../assets/icons/normal-one.png"
             v-if="showStyle ==='column'"
             alt=""
             @click="showStyleChange('row')">
        <img src="../../../assets/icons/select-two.png"
             alt=""
             v-if="showStyle === 'column'">
        <img src="../../../assets/icons/normal-two.png"
             alt=""
             v-if="showStyle === 'row'"
             @click="showStyleChange('column')">
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      sortBy: 1,
      active: 1,
      page: 0,
      timer: null
    };
  },
  computed: {
    ...mapGetters(["showStyle"])
  },
  methods: {
    keyWordsChange(keyWords) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$store.commit("keyWordsChange", keyWords);
      }, 600);
    },
    sortByChange(sortBy) {
      this.$store.commit("sortByChange", sortBy);
    },
    showStyleChange(showStyle) {
      this.$store.commit("showStyleChange", showStyle);
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/styles/color.scss";
@import "../../../assets/styles/mixins.scss";
#productListHeader {
  @include clearfix();
  margin-top: 3px;
  margin-bottom: 12px;
  border-bottom: 2px solid #d3d3d8;
  box-shadow: 0 1px rgba(255, 255, 255, 0.4);
  .fl {
    margin-bottom: 10px;
    margin-left: 1rem;
    .title {
      text-align: left;
      text-indent: 5px;
      font-size: 0.7rem;
      height: 18px;
      margin-bottom: 5px;
    }
    .sortBy {
      width: 250px;
    }
    .el-input__inner {
      height: 34px;
    }
  }
  .fr {
    margin-right: 10px;
    .title {
      height: 18px;
    }
    .el-input {
      width: auto;
      .el-input__inner {
        height: 34px;
      }
      .el-input__icon {
        color: $base;
        line-height: 34px;
      }
    }
    i {
      font-size: 0.9rem;
      cursor: pointer;
      &.active:before {
        color: $base;
      }
    }
    .img-wrapper {
      display: inline-block;
      line-height: 34px;
      margin-left: 0.7rem;
      img {
        line-height: 34px;
        margin-right: 3px;
        display: inline-block;
        width: 1.1rem;
        height: 1.1rem;
        cursor: pointer;
        transform: translateY(0.3rem);
      }
    }
  }
}
</style>
